<template>
    <div>
        <el-card>
            <el-row>
                <el-col :span="12" class="fixedHigh">
                    <div class="ml20">
                        <div class="fontSize">服务运行中心</div>
                        <el-row>
                            <el-col :span="8" v-for="item in standardData" :key="item.id">
                                <div class="ml40 mt40">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="12" class="fixedHigh">
                    <div class="ml20 mb20">
                        <div class="fontSize">原子服务运行中心</div>
                        <el-row>
                            <el-col :span="8" v-for="item in atomicData" :key="item.id">
                                <div class="ml40 mt40">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="12" class="fixedHigh">
                    <div class="ml20 mb20 mt80">
                        <div class="fontSize">服务管理中心</div>
                        <el-row>
                            <el-col :span="8" v-for="item in managementData" :key="item.id">
                                <div class="ml40 mt40">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="12" class="fixedHigh">
                    <div class="ml20 mt80">
                        <div class="fontSize">服务注册中心</div>
                        <el-row>
                            <el-col :span="8" v-for="item in registeredData" :key="item.id">
                                <div class="ml40 mt40">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="item.status === '1' ? successURL : errorURL"></el-image>
                                    <div class="ml10">
                                        <div>{{item.appname}}</div>
                                        <div>{{item.ip}}</div>
                                        <div>({{item.httpport}}/{{item.socketport}})</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                successURL: 'http://pics.sc.chinaz.com/Files/pic/icons128/652/enable_server.png',
                errorURL: 'http://pics.sc.chinaz.com/Files/pic/icons128/652/desable_server.png',
                apptype: {
                    standard: 2,
                    atomic: 5,
                    management: 3,
                    registered: 1
                },
                standardData: [],
                atomicData: [],
                managementData: [],
                registeredData: []
            }
        },
        mounted() {
            this.getStandardData()
            this.getAtomicData()
            this.getManagementData()
            this.getRegisteredData()
        },
        methods: {
            // 获取服务运行中心数据
            getStandardData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.standard
                }).then(result => {
                    if (result.success) {
                        this.standardData = result.data
                    }
                })
            },
            // 获取原子服务运行中心数据
            getAtomicData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.atomic
                }).then(result => {
                    if (result.success) {
                        this.atomicData = result.data
                    }
                })
            },
            // 获取服务管理中心数据
            getManagementData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.management
                }).then(result => {
                    if (result.success) {
                        this.managementData = result.data
                    }
                })
            },
            // 获取服务注册中心数据
            getRegisteredData() {
                this.$http.get('/esbApp/firstPage', {
                    apptype: this.apptype.registered
                }).then(result => {
                    if (result.success) {
                        this.registeredData = result.data
                    }
                })
            }
        },
        components: {

        }
    }
</script>

<style scoped lang="less">
    .el-card {
        width: 100%;
        height: 14rem;

        .fixedHigh {
            height: 5.2rem;
        }

        .ml40 {
            margin-left: 0.4rem;
        }

        .mb20 {
            margin-bottom: 0.2rem;
        }

        .mt40 {
            margin-top: 0.4rem;
        }

        .mt80 {
            margin-top: 0.8rem;
        }

        .fontSize {
            margin-top: 0.4rem;
            font-size: 0.2rem;
        }
    }
</style>
